<!DOCTYPE html>
<html>
<head>
    <title>商城</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style-type: none;
	        height:100%;
        }
        .pic3D{
            perspective: 2000px;
            overflow: hidden;
            border:1px dashed green;
	    height:100%;
        }
        .pic3D ul{
            transform-style: preserve-3d;
            width: 100%;
            height: 97%;
            margin:10px auto;
            position: relative;
        }
        .pic3D ul li{
            position: absolute;
            margin:auto;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: auto;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 0 10px black;
            transition:.5s;
        }
        .pic3D ul li img{
            width: 100%;
            height: 100%;
        }
        .pic3D ul li:hover{
            top:20px;
        }

        .li2{
            transform: translateX(0px) translateZ(0px);
        }
        .li1{
            transform: translateX(-150px) translateZ(-1500px);
        }
        .li3{
            transform: translateX(150px) translateZ(-1500px);
        }
        .li4{
            transform: translateX(0px) translateZ(-3000px);
        }
        .li5{
            transform: translateX(0px) translateZ(-3000px);
        }
        .li6{
            transform: translateX(0px) translateZ(-3000px);
        }

        .pic3D ol{
            height: 150px;
            width: 400px;
            margin:0 auto;
        }
        .pic3D ol li{
            text-align: center;
            float: left;
            line-height: 30px;
            width: 30px;
	    height:30px;
            background: rgb(102,217,239);
            color:white;
            margin-left: 24px;
            border-radius: 15px;
            cursor: pointer;
        }
        .pic3D ol li:hover{
            background: orange;
        }
    </style>
</head>
<body>
    <div class="pic3D">
        <ul onselectstart="return false">
            <li class="li1"><img src="images/shop1.png"></li>
            <li class="li2"><img src="images/shop2.png"></li>
            <li class="li3"><img src="images/shop3.png"></li>
            <li class="li4"><img src="images/shop4.png"></li>
            <li class="li5"><img src="images/shop5.png"></li>
            <li class="li6"><img src="images/shop6.png"></li>
        </ul>
        <div onselectstart="return false">
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </div>
    </div>
</body>
<script type="text/javascript">
	var oPosition = {}; //触点位置
	 			//获取触点位置
            function touchPos(e){
                var touches = e.changedTouches, l = touches.length, touch, tagX, tagY;
                for (var i = 0; i < l; i++) {
                    touch = touches[i];
                    tagX = touch.clientX;
                    tagY = touch.clientY;
                }
                oPosition.x = tagX;
                oPosition.y = tagY;
                return oPosition;
            }
            //触摸开始
            function touchStartFunc(e){
            	touchPos(e);
                startX = oPosition.x;
                startY = oPosition.y;
            }
            //触摸结束
            function touchEndFunc(e){
  
            	touchPos(e);
                var moveX = oPosition.x - startX;
                var moveY = oPosition.y - startY;
                if(moveX<-100){
                		changePic(this.index+1);
                }else if(moveX>100){
                	changePic(this.index-1);
                }
            }
    var lis = document.querySelectorAll(".pic3D ul li");
    //console.log(lis);
    for(var i = 0, length1 = lis.length; i < length1; i++){
        lis[i].index = i;
        lis[i].addEventListener("click", touch);
	 lis[i].addEventListener('touchstart', touchStartFunc, false);
        lis[i].addEventListener('touchend', touchEndFunc, false);
    }
    var lia = document.querySelectorAll(".pic3D ol li");
    for(var k = 0, length1 = lia.length; k < length1; k++){
        lia[k].index = k;
        lia[k].addEventListener("mouseenter", changePic);
    }
    function changePic (index) {
        var x = index - 1;
        for(var j = 0; j < lis.length; j++){
            n = j - x;
            if (n < 0) {
                n = n + 6;
            } else if (n >5) {
                n = n - 6;
            }
            
            switch (n) {
                case 0:
                    lis[j].style.transform = 'translateX(-150px) translateZ(-1500px)';
                break;
                case 1:
                    lis[j].style.transform = 'translateX(0) translateZ(0)';
                    for(var i = 0, length1 = lia.length; i < length1; i++){
                        lia[i].style.background = 'rgb(102,217,239)';
                    }
                    lia[j].style.background = 'orange';
                break;
                case 2:
                    lis[j].style.transform = 'translateX(150px) translateZ(-1500px)';
                break;
                case 3:
                case 4:
                case 5:
                    lis[j].style.transform = 'translateX(0px) translateZ(-3000px)';
                break;
                default:
                break;
            }
        }
        // return false;
    }
  function touch(){
	changePic(this.index);
	}
</script>
<script src="assets/js/jquery-1.8.2.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
</html>
